<template>
  <view class="page">
    <view class="buy-record-item" v-for="item in buyRecords">
      <view class="title">{{ item.appName }}</view>
      <view class="row">所购商品：{{ item.orderBody }}</view>
      <view class="row">所属平台：{{ item.appName }}</view>
      <view class="row">实际支付：{{ item.payPrice.toFixed(2) }}元</view>
      <view class="row">支付时间：{{ item.buyTime }}</view>
    </view>
    <empty v-if="!loading && (!buyRecords || buyRecords.length < 1)" height="calc(100vh - 32rpx)"></empty>
  </view>
</template>
<script>
import request from "../../../utils/request"
import empty from "../../../components/empty"
export default {
  components: { empty },
  onLoad(options) {
    this.newUserId = options.newUserId
  },
  onShow() {
    this.getInviteUserBuyRecord()
  },
  data() {
    return {
      newUserId: "",
      buyRecords: [],
      loading: false,
    }
  },
  methods: {
    getInviteUserBuyRecord() {
      this.loading = true
      uni.showLoading({
        title: "加载中",
      })
      request({
        url: "userShare/userBuyRecord",
        method: "post",
        data: {
          current: 1,
          size: -1,
          newUserId: this.newUserId,
        },
      })
        .then((res) => {
          this.buyRecords = res.records
        })
        .catch((err) => {
          console.log(err, "err")
          uni.showToast({
            title: err,
            icon: "none",
          })
        })
        .finally((_) => {
          uni.hideLoading()
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.page {
  background: #f3f3f3;
  min-height: 100vh;
  padding-top: 32rpx;
  box-sizing: border-box;
  .buy-record-item {
    padding: 32rpx 28rpx;
    background: white;
    margin-bottom: 32rpx;
    .title {
      font-weight: 500;
      color: #149764;
      font-size: 30rpx;
    }
    .row:first-child {
      margin-top: 24rpx;
    }
    .row {
      margin-top: 10rpx;
      font-size: 26rpx;
      color: #666666;
    }
  }
}
</style>
